<template>
	<div class="timer">{{ myHours }}:{{ myMinutes }}:{{ mySeconds }}</div>
</template>

<script>
export default {
	data() {
		return {
			currentTime: 0,
			timeObj: null, // 时间对象,下方会用到
			myHours: '00', // 我定义来接收计算出来的 小时 的
			myMinutes: '00', // 我定义来接收计算出来的 分钟 的
			mySeconds: '00', // 我定义来接收计算出来的 秒钟 的
			ineterTimer: 0,
		}
	},
	methods: {
		testTimer() {
			this.timeFunction()
			this.ineterTimer = setInterval(() => {
				this.timeFunction()
			}, 1000)
		},
		timeFunction() {
			// 开始执行倒计时
			this.timeObj = {
				// 时间对象
				seconds: Math.floor(this.currentTime % 60),
				minutes: Math.floor(this.currentTime / 60) % 60,
				hours: Math.floor(this.currentTime / 60 / 60) % 24,
			}
			// 计算出时分秒
			this.myHours = this.timeObj.hours < 10 ? '0' + this.timeObj.hours : this.timeObj.hours
			this.myMinutes = this.timeObj.minutes < 10 ? '0' + this.timeObj.minutes : this.timeObj.minutes
			this.mySeconds = this.timeObj.seconds < 10 ? '0' + this.timeObj.seconds : this.timeObj.seconds
			this.currentTime++
		},
		pause() {
			clearInterval(this.ineterTimer)
		},
		clear() {
			this.currentTime = 0
			this.timeObj = null
			this.myHours = '00'
			this.myMinutes = '00'
			this.mySeconds = '00'
		},
	},
}
</script>
<style lang="less" scoped>
.timer {
	text-align: center;
}
</style>
